/*
* @Author: Yejing
* @Date: 2023-06-25 15:23:54
* @LastEditors: Yejing
* @LastEditTime: 2023-07-03 11:47:19
* @Description: desc
*/
<template>
    <view class="anchor-card-container" @click="anchorListClick">
        <view class="left">				
           <u-avatar class="anchorHead"   :class="details.liveStatus?'liveCss':''" :src="$u.file.getMedieUrl(details.anchorAvatar)" mode="circle" size='95' ></u-avatar>
            <view>
                <text>{{ details.nickName }}</text>
                <text class="fans">{{ details.fans }} Foolwers</text>
            </view>
        </view>
        <view class="right">
            <u-button type="primary" v-if="details.attentionState==0" @click="attention(1)">关注</u-button>
            <u-button type="primary" v-else plain @click="attention(0)">已关注</u-button>
        </view>
    </view>
</template>

<script>
export default {
    name: "anchorCard",
    props: {
        details: {
            default: () => ({}),
            type: Object
        }
    },
    data() {
        return {};
    },
	mounted() {
		// console.log(45454,this.details);
	},
    methods: {
        //关注
        attention(val) {
			this.$emit('isloading',true)
            this.$u.post('/app/user/concern/' + this.details.userId).then(res => {
				if(res.code==200){
					this.$emit('isloading',false)
				}
                this.details.attentionState = val
				this.$u.init.getUserInfo()
                if (val == 1) {
                    this.$u.toast('已关注')
                } else {
                    this.$u.toast('已取消关注')
                }
            })
        },
        //跳转
        anchorListClick(){
					this.$u.vuex('vuex_anchor_info',this.details)
					let environment=uni.getSystemInfoSync().uniPlatform					            
			
			if(!this.details.liveStatus){
				this.$u.route('pages/user/components/userInfo',{
				  
				    userId:this.details.userId
				})
			}else{				
				
				if (environment == 'app') {
					uni.navigateTo({
						url: `/pages/liveBar/livePlayer/livePlayer?userId=${this.details.userId}&avatar=${this.details.anchorAvatar}&userName=${this.details.nickName}`,
						animationType: 'slide-in-right',
						animationDuration: 300
					});
				} else {
					uni.showToast({
						title: this.$t('product.goMobile'),
						icon: 'none'
					});
				}
			}
			
        }
    }
}
</script>

<style lang="scss" scoped>
.anchor-card-container {
  margin-bottom: 20rpx;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  position: relative;
  padding-bottom: 30rpx;
  align-items: center;

  &::before {
    position: absolute;
    content: '';
    border: 2rpx solid #F2F3F5;
    width: calc(100% - 100rpx);
    right: 0;
    bottom: 0;

  }

  .left {
    display: flex;
    align-items: center;

    uni-text {
      margin-left: 20rpx;
      display: block;

      &:nth-child(1) {
        font-size: 34rpx;
        color: #0A1F44;
      }

      &:nth-child(2) {
        font-size: 30rpx;
        color: #999CAD;
        margin-top: 5rpx;
      }
    }
  }

  .right {
    uni-button {
      width: 158rpx;
      height: 48rpx;
      background-color: #2934D0;
      font-size: 28rpx;
    }

    .u-btn--primary--plain {
      background: transparent !important;
      border: 2rpx solid #2934D0 !important;
      color: #2934D0 !important;

      &::after {
        border: 0;
      }
    }
  }
}
.liveCss{
	// border: 1px solid #2934D0;
	padding: 1px;
	-webkit-animation: ani 2s linear infinite;
}
.anchorHead{
	
	 margin-left: 15rpx;
}
@keyframes ani {
   0%{
        box-shadow: 0 0 0px #ec1a4e;
		
   }
   25%{
        box-shadow: 0 0 5px #ec1a4e;
		
   }
    50%{
        box-shadow: 0 0 10px #ec1a4e;
		
   }
   75%{
        box-shadow: 0 0 5px #ec1a4e;
		
   }
   100%{
		box-shadow: 0 0 0px #ec1a4e;
		
   }
}
 
</style>
